<!DOCTYPE html>
<html lang="en">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<head>
    <title>首页</title>
    <th:block th:include="client/include :: common-css" />
    <th:block th:include="client/include :: common-js" />
</head>

<body gtools_scp_screen_capture_injected="true" class="bg-">
<!--[if lt IE 8]>
<div class="browsehappy" role="dialog">
    当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank">升级你的浏览器</a>。
</div>
<![endif]-->
<th:block th:include="client/include :: header" />
<div class="am-g am-g-fixed blog-fixed index-page">
    <div class="am-u-md-8 am-u-sm-12">
        <!-- 文章遍历并分页展示 -->
        <div>
            <!-- 文章遍历并分页展示 -->
            <article th:each="article:${articlePage.list}" class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" th:src="${'./user/img/rand/'+(article.id%25+1)+'.png'}"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" >发布于 [[${article.created}]]</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" href="article.html" th:text="${article.title}">函数式接口</a>
                        </div>
                    </h2>
                    <!-- 文章摘要-->

                    <div style="font-size: 16px;"  >[[${@textUtils.intro(article.content,100)}]]</div>
                </div>
            </article>

        </div>
        <div>
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" src="./user/img/rand/6.png"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" >发布于 2018-11-27</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" href="./article/6" >JDK 8——Lambda表达式介绍</a>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" >   Lambda表达式是JDK 8中一个重要的新特性，它使用一个清晰简洁的表达式来表达一个接口，同时Lambda表达式也简化了对集合以及数组数据的遍......</div>
                </div>
            </article>
        </div>
        <div>
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" src="./user/img/rand/5.png"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" >发布于 2018-11-27</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" href="./article/5" >2018版Go语言+区块链学习线路图</a>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" >     12年传智播客黑马程序员分享免费视频教程长达10万余小时，累计下载量超3000万次，受益人数达千万。2018年我们不忘初心，继续前行。 路线......</div>
                </div>
            </article>
        </div>
        <div>
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" src="./user/img/rand/4.png"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" >发布于 2018-11-16</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" href="./article/4" >2018新版PHP学习线路图</a>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" >     传智播客黑马程序员作为一个IT学习平台，历经12年的成长，免费分享视频教程长达10万余小时，累计下载量超3000万次，受益人数达千万。201......</div>
                </div>
            </article>
        </div>
        <div>
            <article class="am-g blog-entry-article">
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
                    <img width="100%" class="am-u-sm-12" src="./user/img/rand/3.png"/>
                </div>
                <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
                    <!-- 文章分类 -->
                    <span class="blog-color"style="font-size: 15px;"><a>默认分类</a></span>
                    <span>&nbsp;&nbsp;&nbsp;</span>
                    <!-- 发布时间 -->
                    <span style="font-size: 15px;" >发布于 2018-11-13</span>
                    <h2>
                        <div><a style="color: #0f9ae0;font-size: 20px;" href="./article/3" >2018新版前端与移动开发学习线路图</a>
                        </div>
                    </h2>
                    <!-- 文章摘要-->
                    <div style="font-size: 16px;" >     传智播客黑马程序员作为一个IT学习平台，历经12年的成长，免费分享视频教程长达10万余小时，累计下载量超3000万次，受益人数达千万。201......</div>
                </div>
            </article>
        </div>
        <!-- 文章分页信息 -->
        <!-- 文章分页信息 -->
        <div class="am-pagination">
            <ol class="am-pagination">
                <li th:if="${!articlePage.isFirstPage}"  class="am-pagination-prev">
                    <a  th:href="${'./?pageNum='+articlePage.prePage}">上一页</a>
                </li>
                <li th:class="${num==articlePage.pageNum?'current':''}" th:each="num:${articlePage.navigatepageNums}" >
                    <a th:href="${'./?pageNum='+num}" th:text="${num}">1</a>
                </li>
                <li th:if="${!articlePage.isLastPage}" class="am-pagination-next">
                    <a th:href="${'./?pageNum='+articlePage.nextPage}">下一页</a>
                </li>
            </ol>
        </div>

    </div>
    <!-- 博主信息描述 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>CrazyStone</span></h2>
            <img src="./assets/img/me.jpg" alt="about me" class="blog-entry-img"/>
            <p>
                Java后台开发
            </p>
            <p>个人博客小站，主要发表关于Java、Spring、Docker等相关文章</p>
        </div>
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>联系我</span></h2>
            <p>
                <a><span class="am-icon-github am-icon-fw blog-icon"></span></a>
                <a><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
            </p>
        </div>
    </div>


    <!-- 阅读排行榜 -->
    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
        <div class="blog-sidebar-widget blog-bor">
            <h2 class="blog-text-center blog-title"><span>阅读排行榜</span></h2>
            <div style="text-align: left">

                <th:block th:each="article,stat:${hotArticleList}" >
                    <a  style="font-size: 15px;" th:href="${'/article/'+article.id}">[[${stat.count}]]、[[${article.title}]]([[${article.hits}]])</a>
                    <hr style="margin-top: 0.6rem;margin-bottom: 0.4rem" />
                </th:block>

            </div>
        </div>
    </div>

</div>

<footer class="footer bg-white">
    <div class="footer-social">
        <div class="footer-container clearfix">
            <div class="social-list">
            </div>
        </div>
    </div>
    <div class="footer-meta">
        <div class="footer-container">
            <div class="meta-item meta-copyright">
                <div class="meta-copyright-info">
                    <div class="info-text">
                        <a style="display: block;margin: 0 auto;" class="info-logo">
                            <img style="display: block;margin: 0 auto;" src="./user/img/bloglogo.jpg"/>
                        </a>
                        <p style="margin: 30px"><time class="comment-time">2024</time> &copy; Powered By <a style="color: #0e90d2" rel="nofollow">CrazyStone</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<script src="./user/js/headroom.min.js"></script>
<script src="./user/js/highlight.min.js"></script>
<script src="./user/js/instantclick.min.js"></script>

</body>
</html>

